<template>
  <view class="shopContainer">
    <view class="shopTitle">
      <view class="text">订单列表</view>
      <fui-icon name="close" @click="closePopup" size='40'></fui-icon>
    </view>
    <view class="shop-view" v-if="!listData.length">
      <fui-empty :isFixed="true" src="/static/images/empty/data.png" title="暂无订单数据" size="24" color="#999"></fui-empty>
    </view>
    <scroll-view scroll-y class="shop-view" v-else @scroll="onScroll">
      <view class="order-list" v-for="item in listData" :key="item.id">
        <view class="order-title">订单编号<span>{{ item.no }}</span></view>
        <view class="order-list-content" v-for="orderItems in item.items" :key="orderItems.id">
          <image :src="orderItems.picUrl" style="width: 132rpx; height: 132rpx; border-radius: 16rpx; overflow: hidden;" mode=""></image>
          <view class="content-right">
            <view class="content-right-title">
              <view class="content-right-title-left">{{orderItems.spuName}}</view>
              <view class="content-right-title-right"><span>￥</span>{{utils.moneyFormatter(orderItems.price / 100)}}</view>
            </view>
            <view class="content-right-num">x{{orderItems.count}}
            </view>
          </view>
        </view>
        
        <view class="order-list-bottom">
          <span>实付款：</span>￥{{utils.moneyFormatter(item.totalPrice / 100)}}
        </view>
      </view>
      <fui-loadmore :state="moreState"></fui-loadmore>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, inject } from 'vue'
import orderApi from '@/api/order'
import utils from '@/components/firstui/fui-utils'

const tab = inject('$tab')
const modal = inject('$modal')

const emits = defineEmits(['closeOrderPop'])
const props = defineProps({
  api: {
    type: String,
    default: 'getSupplierOrderList'
  },
  companyId: String | Number
})

// 获取订单列表
const moreState = ref(1)
const queryParams = ref({})
const listData = ref([])
const getOrderList = () => {
  try {
    moreState.value = 2
    queryParams.value.companyId = props.companyId
    modal.loading('加载中...')
    orderApi[props.api](queryParams.value).then((res) => {
      modal.closeLoading()

      if (res.code === 0) {
        const newData = res.data.list || []
        if (queryParams.value.pageNo * queryParams.value.pageSize >= res.data.total) {
          moreState.value = 3
        } else {
          moreState.value = 1
        }
        if (queryParams.value.pageNo > 1) {
          listData.value = [...listData.value, ...newData]
        } else {
          listData.value = [...newData]
        }
      } else {
        modal.msgError(res.msg)
      }
    })
  } catch (e) {
    modal.closeLoading()
  }
}

const openPopup = () => {
  queryParams.value = {
    pageNo: 1,
    pageSize: 10,
    status: '30'
  }
  getOrderList()
}

const closePopup = () => {
  emits('closeOrderPop')
}

const onScroll = (event) => {
  const scrollTop = event.detail.scrollTop
  const scrollHeight = event.detail.scrollHeight
  const delta = 500

  // 判断是否到达底部
  if (scrollTop + delta >= scrollHeight) {
    if (moreState.value == 1) {
      queryParams.value.pageNo++
      getOrderList()
    }
  }
}

defineExpose({
  openPopup
})
</script>

<style lang="scss">
.shopContainer {
  position: fixed;
  width: 100%;
  height: 100%;
  bottom: 0;
  padding: 32rpx 40rpx;
  box-sizing: border-box;
  font-family: PingFang SC, PingFang SC;
  color: #333333;
  background-color: #f8f8f8;
  border-radius: 24rpx 24rpx 0 0;

  .shopTitle {
    font-size: 32rpx;
    font-weight: bold;
    color: #333333;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30rpx;
  }

  .shop-view {
    height: calc(100% - 80rpx);
    overflow-y: auto;
  }

  .order-list {
    width: 100%;
    background: #ffffff;
    border-radius: 16rpx;
    margin-bottom: 30rpx;
    overflow: hidden;
    .order-title {
      width: 100%;
      height: 78rpx;
      line-height: 78rpx;
      padding: 0 28rpx;
      font-size: 28rpx;
      font-weight: bold;
      color: #333333;
      background: linear-gradient(
        93deg,
        #e9efff 0%,
        rgba(255, 255, 255, 0.05) 80%
      );
      box-sizing: border-box;

      span {
        padding-left: 20rpx;
      }
    }

    .order-list-content {
      width: 100%;
      padding: 24rpx 28rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      .content-right {
        width: calc(100% - 172rpx);
        font-size: 28rpx;
        font-weight: bold;
        color: #333333;
        line-height: 40rpx;
        .content-right-title {
          display: flex;
          justify-content: space-between;
          
          .content-right-title-left{
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          
          .content-right-title-right {
            font-size: 36rpx;

            span {
              font-size: 24rpx;
            }
          }
        }
        .content-right-num {
          font-size: 24rpx;
          font-weight: 400;
          color: #666666;
        }
      }

      .right-list {
        display: flex;
        flex-wrap: wrap;

        .right-text {
          width: 50%;
          font-size: 24rpx;
          font-weight: 400;
          color: #999999;
          display: flex;
          align-items: center;
          margin-bottom: 10rpx;

          image {
            padding-right: 10rpx;
          }

          span {
            color: #333333;
          }

          .right-number {
            font-weight: bold;
            color: var(--fui-color-link);
            padding: 0 10rpx;
          }
        }
      }
    }
    .order-list-bottom {
      width: calc(100% - 56rpx);
      padding: 12rpx 0rpx 20rpx;
      margin: 18rpx auto 0;
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
      border-top: 1px solid #f1f1f1;
      text-align: right;
      span {
        font-size: 28rpx;
        color: #666666;
      }
    }
  }
}
::-webkit-scrollbar {
  display: none; /* 隐藏滚动条本身 */
  width: 0 !important;
  height: 0 !important;
  -webkit-appearance: none;
  background: transparent;
}
</style>